<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-4-2-徽章与巨幕</title>
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	
</style>
</head>
<body>



<h2>巨幕</h2>

	<div class="jumbotron">
		<div class="container">
			<h1>Hello world!</h1>
			<p>欢迎来到我的教程，希望你之后好好学习，有所成就！</p>
			<p><a href="#" class="btn btn-info btn-lg" role="button"> Learn more </a></p>
		</div>
	</div>







<hr>

<h1>徽章</h1>
	<div class="container">
		<a href="#">短信消息<span class="badge">30</span></a>
		<button class="btn btn-success" type="button">Message <span class="badge">100</span></button>
	</div>
	
	<ul class="nav nav-pills" role="rablist" id="ul-badge">
		<li class="active" role="presentation">
			<a href="#">Home <span class="badge">100</span></a>
		</li>

		<li role="presentation">
			<a href="#">Profile <span class="badge">10</span></a>
		</li>

		<li role="presentation">
			<a href="#">Message <span class="badge">90</span></a>
		</li>

	</ul>















<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
		
	$("#ul-badge").click(function(e){
		e.preventDefault()
		$(this).tab("show")
	})





</script>

</body>
</html>